/*
 * @name: 菜单递归组件
 * @Author: along
 * @Date: 2019-06
 * @Last Modified by: along
 * @Last Modified time: 2020-07-17
*/
<template>
    <div class="menu-wrapper">
        <template v-for="(item, index) in list">
            <el-menu-item
                v-if="item.path"
                :index="item.path"
                :key="index"
            >
                <i
                    v-if="item.icon"
                    :class="`iconfont ${item.icon}`"
                />
                <span
                    slot="title"
                    class="title"
                >{{ item.title }}</span>
            </el-menu-item>
            <el-submenu
                v-else
                :key="index"
                :index="item.title"
            >
                <template slot="title">
                    <i
                        v-if="item.icon"
                        :class="`iconfont ${item.icon}`"
                    />
                    <span class="title">{{ item.title }}</span>
                </template>
                <hand-menu :list="item.children" />
            </el-submenu>
        </template>
    </div>
</template>

<script>
export default {
    name: 'HandMenu',
    props: {
        list: {
            type: Array,
            default: () => {
                return [];
            }
        }
    }
};
</script>
<style lang="less" scoped>
    .el-menu-item {
        height: 56px;
        line-height: 56px;
        &:hover {
            color: #fff!important;
            background-color: transparent!important;
            .iconfont {
                color: #fff;
            }
        }
    }
    .iconfont {
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        line-height: 56px;
        position: relative;
        top: -1px;
    }
</style>
<style lang="less">
.el-submenu__title:hover{
    background: rgb(0,17,33) !important;
}
.is-active {
    background: #001529 !important;
}
.el-submenu__title {
    height: 56px !important;
    display: flex;
    align-items: center;
}
.el-menu-item:hover {
    background: #06090c !important;
}
.el-menu-item:hover .iconfont {
    color: #1890ff !important;
}
.el-menu-item:hover .title {
    color: #1890ff !important;
}
.menu .el-menu .menu-wrapper .el-menu-item:hover .iconfont {
    color: #fff !important;
}
.menu .el-menu .menu-wrapper .el-submenu .el-submenu__title {
    &:hover .iconfont{
        color: #fff !important;
   }
}
</style>
